import React from 'react';
import { PopConfirm } from '@teamix/ui';
import { YunxiaoIcon } from '@alife/devops-ui';
import intl from '../../locale';

export default class DeleteConfirm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      submitting: false,
    };
  }

  onConfirm = () => {
    if (this.state.submitting) return;
    this.setState({ submitting: true });
    const data = this.props.tagName ? this.props.tagName : this.props.id;
    this.props.remove(
      data,
      () => {
        this.setState({
          visible: false,
          submitting: false,
        });
      },
      () => {
        this.setState({ submitting: false });
      },
    );
  };

  onCancel = () => {
    this.setState({
      visible: false,
    });
  };

  onVisibleChange = (visible) => {
    this.setState({
      visible,
    });
  };

  render() {
    const { visible } = this.state;
    const { content, trigger, align } = this.props;
    return (
      <PopConfirm
        type="danger"
        triggerType="click"
        align={align || 'br'}
        title={intl.get({
          id: 'code-assets.components.deleteConfirm.ConfirmDeletion',
          defaultMessage: '确认删除',
        })}
        content={intl.get(
          {
            id: 'code-assets.components.deleteConfirm.AreYouSureYouWant',
            defaultMessage: '确认需要删除当前{content}吗？',
          },
          { content },
        )}
        icon={<YunxiaoIcon type="warning-fill" style={{ color: '#ffa003', marginRight: '10px' }} />}
        trigger={trigger}
        onConfirm={this.onConfirm}
        confirmProps={{ loading: this.state.submitting }}
        onCancel={this.onCancel}
        visible={visible}
        onVisibleChange={this.onVisibleChange}
      />
    );
  }
}
